<template>
	<view>
		<u-navbar :is-back="true" title="分组管理" :background="{backgroundColor: '#00a8ff'}">
			<view class="navbar-right" slot="right">
				<view class="" style="margin-right: 20rpx;color: #FFFFFF;" @click="accomplish()">
					完成
				</view>
			</view>
		</u-navbar>
		<view class="" style="background-color: #FFFFFF;">
			<u-swipe-action :show="false" :index="index" v-for="(item, index) in groupList" :key="item.id"
				@click="click" @open="open" :options="options" @change="change" @confirm="confirm" @onclick="onclick">
				<view class="item u-border-bottom u-flex">
					<u-icon name="minus-circle-fill" class="u-flex-1" color="#fe0102" size="28"></u-icon>
					<view class="title-wrap u-flex-12">
						<text class="title u-line-2"> 
						{{ item.name }} 
						</text>
					</view>
					<u-icon name="list" color="#b4b4b6" class="u-flex-1" style="float: right;" size="28"></u-icon>
				</view>
			</u-swipe-action>
		</view>
		
		<u-popup mode="bottom" v-model="show" @close="closePopup" class="u-p-24" :mask="false" style="width: 90%;margin: 0 auto;">
			<view class="u-m-b-26 popupView">
				<p class="p_tetx">
					该分组下还有患者存在，删除后患者会被放到默认分组</p>
				<p style="color: #f13740;font-size: 24rpx;text-align: center;line-height: 80rpx;"
					@click="deleteClick()">删除</p>
			</view>
			<view class="u-m-b-26 popupView">
				<p style="color: #2f84de;font-size: 24rpx;text-align: center;line-height: 80rpx;">取消</p>
			</view>
		</u-popup>	
		<u-mask :show="showMask" @click="show = false"></u-mask>
	</view>
</template>

<script>
	
	import prettyChange from '@/components/pretty-exchange/pretty-exchange.vue'
	export default {
		components:{
			prettyChange
		},
		onShow() {
			// 档案分组列表
			this.init();
		},
		data() {
			return {
				list:[{
					name:'小张',
					src:'https://s.cn.bing.net/th?id=ODL.8acd6796e431785e9623a48ef791095b&w=146&h=146&c=7&rs=1&qlt=80&pid=RichNav',
					color:'#E5716A'
				},{
					name:'小q',
					color:'#D3D240',
					src:'https://tse1-mm.cn.bing.net/th?id=OIP.OzTCtonjrdsbnZ8tbeYM4AAAAA&w=150&h=160&c=8&rs=1&qlt=90&pid=3.1&rm=2'
				},{
					name:'小星',
					color:'#89CB5B',
					src:'https://s.cn.bing.net/th?id=ODL.7b61652172fdf6eee5d579d645e13bdb&w=146&h=146&c=7&rs=1&qlt=80&pid=RichNav'
				},{
					name:'小王',
					color:'#78DCAE',
					src:'https://tse2-mm.cn.bing.net/th/id/OIP.fPtV12SSVlxTIlLoqm5F2wAAAA?w=176&h=180&c=7&o=5&pid=1.7'
				},{
					name:'小宝',
					color:'#6EABE7',
					src:'https://tse1-mm.cn.bing.net/th/id/OIP.pWnNuLzgsLmnXQj_2w2YzAAAAA?w=180&h=180&c=7&o=5&pid=1.7'
				}],
				ispush: false,
				disabled: false,
				btnWidth: 140,
				show: false,
				showMask:false,
				groupList: [],
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#fe0102'
					}
				}],
				value: '',
				type: 'text',
				border: false,
				index: '',
				index1: '',
				ids: []
			};
		},
		methods: {
			changeee(e) {
				console.log(e)
			},
			// 数据
			onclick(e) {
				console.log('=== onclick start ===');
				console.log("被点击行: " + JSON.stringify(e.value));
				console.log("被点击下标: " + JSON.stringify(e.index));
				console.log('=== onclick end ===');
			},
			change(e) {
				console.log('=== change start ===');
				console.log("被拖动行: " + JSON.stringify(e.moveRow));
				console.log('原始下标：', e.index);
				console.log('移动到：', e.moveTo);
				console.log('=== change end ===');
			},
			confirm(e) {
				console.log('=== confirm start ===');
				console.log("被拖动行: " + JSON.stringify(e.moveRow));
				console.log('原始下标：', e.index);
				console.log('移动到：', e.moveTo);
				console.log('=== confirm end ===');
			},
			// 删除操作事件
			deleteClick() {
				// 拿到分组id 根据分组id进行删除操作
				console.log(this.groupList[this.index1].id);
				this.show = false;
				// 打开mask
				
				// 删除操作
				this.$apiBasics.delgroup({
					id: this.groupList[this.index1].id,
				}).then((res) => {
					console.log('request success', res);
					// 分组列表
					console.log("删除了" + this.groupList[this.index1].name);
					this.init();
				}).catch((err) => {
					this.loading = false;
					console.log('request fail', err);
				})
			},
			// groupsort // 分组排序操作 入参 排序后数组
			groupsort() {
				this.$apiBasics.groupsort({
					ids: this.ids
				}).then((res) => {
					console.log('request success', res);
				}).catch((err) => {
					this.loading = false;
					console.log('request fail', err);
				})
			},
			click(index, index1) {
				this.show = true;
				this.index1 = index;
				 this.showMask=true;
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				this.groupList[index].show = true;
				
			},
			closePopup(){
				this.showMask=false;
			},
			// 页面显示初始化事件
			init() {
				this.$apiBasics.group().then((res) => {
					console.log('request success', res);
					// 分组列表
					this.groupList = res.data.data;
					console.log(this.groupList);
				}).catch((err) => {
					this.loading = false;
					console.log('request fail', err);
				})
				let _arr = [];
				this.groupList.map((item, index) => {
					_arr.push(Object.assign({}, item, {
						show: true
					}))
				})
				console.log(_arr);
				this.groupList = _arr;
			},
			// 完成方法
			accomplish() {
				this.$u.toast(`完成`);
				this.$u.toast(`保存修改状态，排序等`)
			}
		}
	};
</script>

<style lang="scss" scoped>
	//scoped css只在当前页生效 不影响子组件
	page {
		background-color: #efeff4;
	}

	@media (prefers-color-scheme: dark) {
		page {
			background-color: #000000;
		}
	}

	.content {
		.row {
			display: flex;
			flex-direction: row;
			align-items: center;

			.icon {
				width: 30px;
				border-radius: 6px;
				margin-right: 13px;
			}

			.text {
				font-size: 13px;
			}
		}
	}

	.item {
		width: 100%;
		padding: 20rpx;
	}

	.p_tetx {
		color: #9b9b9b;
		font-size: 24rpx;
		text-align: center;
		line-height: 60rpx;
		border-bottom: 1px solid #e7e7e9;
	}


	.title {
		text-align: left;
		font-size: 28rpx;
		// color: $u-content-color;
	}

	.popupView {
		border-radius: 10rpx;
		background-color: #f4f4f7;
	}
</style>
